<template>
	<view>
		<!-- 角标 -->
		<uni-badge 
		:text="number"
		type="success"
		size="normal"
		max-num="30"
		absolute="rightTop"
		>
			<view class="message" @click="number++">我的消息</view>
		</uni-badge>
		
		<!-- 日历 -->
		<uni-calendar 
		ref="calendar"
		:insert="false"
		@confirm="confirm"
		:lunar="true"
		:startDate="startDate"
		:endDate="endDate"
		 />
		 <button @click="open">打开日历</button>
		 
		<!-- 倒计时 -->
		<view class="countdown">
			<!-- 一般用法 -->
			<uni-countdown 
			backgroundColor="#cc4d27"
			color="#ffffff"
			splitorColor="#cc4d27"
			:day="0" 
			:hour="0" 
			:minute="0" 
			:second="timeStart"
			@timeup="timeup"
			></uni-countdown>
		</view>
		
		<!-- 购物车组件 -->
		<view class="goods-carts">
			<uni-goods-nav 
			:options="options" 
			:fill="true" 
			:button-group="buttonGroup" 
			@click="onClick"
			@buttonClick="buttonClick" 
			/>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			// 获取当前系统时间作为开始时间
			this.startDate = new Date().toISOString().split('T')[0];
			// 获取后5天作为结束时间
			const endDateObj = new Date();
			endDateObj.setDate(endDateObj.getDate() + 4);
			this.endDate = endDateObj.toISOString().split('T')[0];		
		},
		data() {
			return {
				number:0,
				//定义一个开始时间和结束时间
				startDate:'',
				endDate:'',
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 3,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
					text: '活动暂未开始',
					//深灰色的背景颜色
					backgroundColor: '#e5e5e5',
					color: '#999'
				}],
				//按钮状态
				status: 0,
				//秒杀手速训练时间 单位毫秒
				time: 0.08,
				timeStart: 3
			}
		},
		methods: {
			//右侧按钮点击触发
			buttonClick(e){
				if(this.status == 0){
					//弹框提示活动暂未开始
					uni.showToast({
						title: '活动暂未开始',
						icon: 'none'
					})
				}else if(this.status == 1){
					//弹出一个确认框
					uni.showModal({
						title: '系统提示',
						content: '你的手速记录是'+this.time+"毫秒",
						success: (res) => {}
					})
				}else if(this.status == 3){
					uni.showToast({
						title: '被抢完了请下次再来',
						icon: 'none'
					})
				}
			},
			timeup(){
				this.status = 1;
				this.buttonGroup = [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}]
				setTimeout(() => {
					this.status = 3;
					this.buttonGroup = [{
						text: '被抢完了',
						backgroundColor: '#e5e5e5',
						color: '#999'
					}]
				},this.time);
			},
			open(){
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>

<style>
.message{
	width: 150px;
	height: 30px;
	background-color: aquamarine;
	text-align: center;
	line-height: 30px;
	margin: 0 auto;
	border-radius: 20px;
}
.countdown{
	width: 120px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	margin: 0 auto;
	/* 淡淡的阴影 */
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.goods-carts {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	position: fixed;
	left: 0;
	right: 0;
	/* #ifdef H5 */
	left: var(--window-left);
	right: var(--window-right);
	/* #endif */
	bottom: 0;
}
</style>
